<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    #changeColor {
        width: 300px;
        height: 300px;
        background-color: aqua;
    }
</style>
<body>
<button id="changeColor" onclick="changeColor()">切换背景颜色</button>
<script>
    /*
    * 绑定事件的方式：
    *  一.html行内模式
    * 二。DOM方式：onXXXX方式
    * 三.
    * */
    //方式一：
    var btn = document.querySelector("#changeColor");
    btn.onclick = function (event) {
        //浏览器在事件调用的时候，都会默认传入一个实践对象，该事件包含了此次事件的详细信息
        console.log(event);
        if (btn.style.backgroundColor == "aqua") {
            btn.style.backgroundColor = "red";
        } else {
            btn.style.backgroundColor = "aqua";
        }
    }
    //方式二：
    /* function changeColor() {
         var btn = document.querySelector("#changeColor");
         if (btn.style.backgroundColor == "aqua") {
             btn.style.backgroundColor = "red";
         } else {
             btn.style.backgroundColor = "aqua";
         }
     }*/
</script>
</body>
</html>